/**
 * @description 仪表盘
 */

import echarts from "../echart"
import { useEffect, useRef } from 'react';
import useChartResize from "@/hooks/useChartResize";
import { getPieMock } from "../mockData";

function Gauge({ configData, chart }) {

  let { title } = configData

  const chartRef = useRef(null)
  const boxRef = useRef()


  useEffect(() => {

    // 图表配置项
    let themeConfig = chart.gauge

    // 限制数量
    let limitNum = chart.base.gaugeNum

    // 基于准备好的dom，初始化echarts实例
    if (!chartRef.current) {
      let myChart = echarts.init(boxRef.current)
      chartRef.current = myChart
    }

    let yAxisData = getPieMock(limitNum)

    // serires单项数据
    let seriesObjData = yAxisData.map((item, index) => {
      return {
        value: item.value,
        name: item.name,
        title: {
          offsetCenter: [String((-200 + (index) * 80) + '%'), '80%']
        },
        detail: {
          offsetCenter: [String((-200 + (index) * 80) + '%'), '105%']
        }
      }
    })


    const options = {
      backgroundColor: themeConfig.backgroundColor,
      color: themeConfig.color,
      title: {
        ...themeConfig.title,
        text: title,
      },
      // // 图例组件
      // legend: themeConfig.legend,
      // 直角坐标系内绘图网格
      grid: themeConfig.grid,
      // 提示框组件
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
        ...themeConfig.tooltip
      },
      series: [{
        ...themeConfig.series,
        data: seriesObjData,
        type: 'gauge',
      }]
    }


    // 绘制图表
    chartRef.current.setOption(options, true);
  }, [chart])

  useChartResize(boxRef, chartRef)

  return (
    <div className='chart-box' ref={boxRef} ></div>
  )
}
export default Gauge